import { DatasetListItem } from '@/common';
import { SvgIcon } from '@/components/icon';
import useWindowWidth from '@/hooks/event/use-window-width';
import { Size } from '@/types/common';
import { Role, RoleManageEvent } from '@/types/role';
import { getBackground } from '@/utils/tree';
import { DeleteOutlined, EditOutlined, EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Dropdown, MenuProps } from 'antd';
import { useContextSelector } from 'use-context-selector';
import { RoleManageContext } from '../context';

interface Props {
  selectedItem: Role | undefined;
  isAdmin: boolean;
  isPermit: boolean;
  parentSize: Size;
  onDeleteClicked?: (item: Role | undefined) => void;
  version?: string;
}

const DatasetHeader = ({
  selectedItem,
  isAdmin,
  parentSize,
  isPermit,
  onDeleteClicked,
  version,
}: Props) => {
  const { isPc } = useWindowWidth();
  const { event$ } = useContextSelector(RoleManageContext, (s) => s);
  return (
    <>
      <div className="flex w-full items-center p-2" style={{ fontSize: '16px' }}>
        <div className="flex items-center">
          <div className="flex-shrink-0 items-center justify-center rounded-lg">
            <SvgIcon
              color="#33ADFF"
              className="mb-2 ml-2 mr-2 mt-2"
              icon="icon-park-solid--people"
              size={32}
            />
          </div>
          <div className="flex flex-col" style={{ maxWidth: `${parentSize?.width * 0.6}px` }}>
            <span className="truncate">
              {selectedItem === undefined ? '角色管理' : selectedItem.name}
            </span>
            <span className="truncate" style={{ fontSize: '12px', color: '#c5c5c5' }}>
              {selectedItem?.description}
            </span>
          </div>
        </div>

        <div className="ml-auto">
          {/* {selectedItem && isAdmin && ( */}
          {selectedItem && (
            <div className="flex flex-nowrap">
              <Button
                type="text"
                icon={<EditOutlined />}
                onClick={() => {
                  event$?.emit(RoleManageEvent.EDITCURRENTROLE);
                }}
              >
                {isPc ? '编辑' : ''}
              </Button>
              {!version && (
                <Button
                  type="text"
                  icon={<DeleteOutlined color="red" />}
                  onClick={() => {
                    event$?.emit(RoleManageEvent.DELCURRENTROLE);
                  }}
                >
                  {isPc ? '删除' : ''}
                </Button>
              )}
            </div>
          )}
        </div>
      </div>
    </>
  );
};
export default DatasetHeader;
